<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="boxl">
        <div class="boxl1">校园风光</div>
        <div class="boxl2"></div>
      </div>
      <div class="boxr">
        <div class="boxr1">
          <div class="boxr1l"></div>
          <div class="boxr1m">学术研究</div>
          <div class="boxr1r"></div>
        </div>
        <div class="boxr2">
          <div class="boxr2l"></div>
          <div class="boxr2m"></div>
          <div class="boxr2r">学生活动</div>
        </div>
      </div>
    </div>
    <!-- <div class="b">456789</div> -->
  </body>
  <style>
    .box {
      width: 1200px;
      height: 500px;
      background-color: aqua;
      margin: auto;
    }
    /* .b {
      width: 100px;
      padding: 100px;
      background-color: rgb(255, 234, 0);
    } */
    .boxl {
      width: 300px;
      height: 500px;
      background-color: blue;
      float: left;
    }
    .boxr {
      width: 900px;
      height: 500px;
      background-color: brown;
      float: left;
    }
    .boxl1 {
      width: 300px;
      height: 250px;
      background-color: rgba(169, 14, 14, 0.845);
      float: inline-end;
      box-sizing: border-box;
      padding: 80px 0px 30px 20px;
      font-size: 40px;
      color: aliceblue;
    }
    .boxl2 {
      width: 300px;
      height: 250px;
      background-color: burlywood;
      float: inline-end;
      background-image: url(fgt12.jpg);
      background-size: 300px 250px;
    }
    .boxr1 {
      width: 900px;
      height: 250px;
      background-color: darkolivegreen;
      float: inline-end;
    }
    .boxr2 {
      width: 900px;
      height: 250px;
      background-color: hotpink;
      float: inline-end;
    }
    .boxr1l {
      width: 500px;
      height: 250px;
      background-color: lightseagreen;
      float: inline-end;
      background-image: url(fgt11.jpg);
      background-size: 500px 250px;
    }
    .boxr1m {
      width: 200px;
      height: 250px;
      background-color: antiquewhite;
      float: inline-end;
      box-sizing: border-box;
      padding: 30px 70px 0px 100px;
      font-size: 35px;
      writing-mode: vertical-lr;
      color: rgb(0, 0, 0);
    }
    .boxr1r {
      width: 200px;
      height: 250px;
      background-color: black;
      float: left;
      background-image: url(1.jpg);
      background-size: 200px 250px;
    }
    .boxr2l {
      width: 300px;
      height: 250px;
      background-color: chocolate;
      float: inline-end;
      background-image: url(fgt13.jpg);
      background-size: 300px 250px;
    }
    .boxr2m {
      width: 300px;
      height: 250px;
      background-color: darkolivegreen;
      float: inline-end;
      background-image: url(fgt14.jpg);
      background-size: 300px 250px;
    }
    .boxr2r {
      width: 300px;
      height: 250px;
      background-color: rgb(73, 73, 223);
      box-sizing: border-box;
      padding: 90px 0px 50px 45px;
      font-size: 50px;
      color: aliceblue;
    }
  </style>
</html>